import QtQuick 1.0
import com.nokia.symbian 1.0

Rectangle {
    id: ingredientEditor
    width: 300
    height: 520
    color: "#001c17"
    radius: 9
    smooth: true
    border.color: "#ffffff"
    anchors.centerIn: parent
    border.width: 4

    property UnitSelectDialog myUnitSelectDialog;
    property IngredientSelectDialog myIngredientSelectDialog;

    // These 2 model(Todo: change name to candidateModel?) store all ingredient and unitType
    // When changing ingredient or unitType, get the value from these 2 model

    // Dose it has a property binding, when item added ?
    property variant ingredientSelectmodel: engine.getAllIngredient();
    property variant unitTypeSelectmodel: engine.getAllUnitType();

    function readIngredients() {
        var ingredientList = engine.recipeIngredients(1);
        for(var i=0; i<ingredientList.length; i++)
        {
            ingredientListModel.append( {"ingredientId": ingredientList[i].ingredientId,
                                       "quantity": ingredientList[i].quantity,
                                       "unitTypeId": ingredientList[i].unitTypeId}
                                       )
        }
    }

    function newIngredient() {
        ingredientListModel.append( {"ingredientId": 0,
                                   "quantity": 0,
                                   "unitTypeId": 0}
                                   )
    }

    function saveIngredient() {

        var ri = engine.recipeIngredient(-1)

        for(var i=0; i<ingredientListModel.count; i++)
        {
            ri.recipeId = 0;
            ri.ingredientId = ingredientListModel.get(i).ingredientId;
            ri.quantity = ingredientListModel.get(i).quantity;
            ri.unitTypeId = ingredientListModel.get(i).unitTypeId;
            engine.addRecipeIngredient(ri)
        }
    }

    Text {
        id: text1
        y: 10
        text: "Enter Steps"
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 10
        font.family: "Hobo Std"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 19
    }

    ListModel {
        id: ingredientListModel
    }

    Component {
        id: ingredientDelegate
        MyDelegate {
            width: ingredientListView.width - 4
            height: 60
            x: 2
        }
    }

    ListView {
        id: ingredientListView
        x: 0
        y: 60
        height: 415
        model: ingredientListModel
        delegate: ingredientDelegate
        orientation: ListView.Vertical
        smooth: true
        clip: true
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
    }

    Rectangle {
        id: newBtn
        y: 481
        width: 59
        height: 30
        color: "#ffffff"
        radius: 15
        anchors.left: parent.left
        anchors.leftMargin: 12

        Text {
            id: text2
            x: 14
            y: 4
            text: "New"
            font.family: "Hobo Std"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 16
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.debug("New Ingredient")
                newIngredient();
            }
        }
    }

    Rectangle {
        id: rectangle1
        x: 227
        y: 481
        width: 59
        height: 30
        color: "#ffffff"
        radius: 15
        anchors.right: parent.right
        anchors.rightMargin: 12

        Text {
            id: text3
            x: 20
            y: 4
            text: "Ok"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.family: "Hobo Std"
            font.pixelSize: 16
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                ingredientEditor.visible = false;
            }
        }
    }
}
